$(function () {
    // tab栏切换
    $('.monitor .tabs > a').on('click', function () {
        $(this).addClass('active').siblings().removeClass('active')
        let index = $(this).index()
        $('.monitor .content').eq(index).show().siblings('.content').hide()
    })
})

$(function () {
    $(".marquee-view .marquee").each(function () {
        // console.log($(this));
        let rows = $(this).children().clone()
        $(this).append(rows)
    })
})

$(function () {
    let myChart = echarts.init(document.querySelector(".pie"))
    let option = {
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
            left: 'center',
            top: 'bottom',
            data: ['rose1', 'rose2', 'rose3', 'rose4', 'rose5', 'rose6', 'rose7', 'rose8']
        },
        series: [
            {
                name: '点位统计',
                type: 'pie',
                radius: ['10%', '70%'],
                center: ['50%', '50%'],
                roseType: 'radius',
                itemStyle: {
                    borderRadius: 5
                },
                data: [
                    { value: 20, name: '云南' },
                    { value: 26, name: '北京' },
                    { value: 24, name: '山东' },
                    { value: 25, name: '河北' },
                    { value: 20, name: '江苏' },
                    { value: 25, name: '浙江' },
                    { value: 30, name: '四川' },
                    { value: 42, name: '湖北' }
                ],
                color: ['#006cff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff'],
                label: {
                    fontSize: 10
                },
                labelLine: {
                    // 连接到图形的线长度
                    length: 6,
                    // 连接到文字的线长度
                    length2: 8
                }
            }
        ]
    }
    myChart.setOption(option)
    // 浏览器缩放的时候，图表跟着自动适配
    window.addEventListener("resize", function () {
        myChart.resize()
    })
})

$(function () {
    const item = {
        name: '',
        value: 1200,
        // 柱子颜色
        itemStyle: {
            color: '#254065'
        },
        // 鼠标经过柱子颜色
        emphasis: {
            itemStyle: {
                color: '#254065'
            }
        },
        // 工具提示隐藏
        tooltip: {
            extraCssText: 'opacity:0'
        },
    }
    // 柱状图
    const myChart = echarts.init(document.querySelector('.bar'))

    const option = {
        xAxis: {
            type: 'category',
            data: ['上海', '广州', '北京', '深圳', '合肥', '', '......', '', '杭州', '厦门', '济南', '成都', '重庆'],
            axisLabel: {
                textStyle: {
                    color: '#4c9bfd'
                }
            },
            axisTick: {
                show: false
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: 'rgba(0, 240, 255, 0.3)',
                }
            },
        },
        yAxis: {
            type: 'value',
            axisTick: {
                show: false
            },
            axisLabel: {
                textStyle: {
                    color: '#4c9bfd'
                }
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: 'rgba(0, 240, 255, 0.3)',
                }
            },
            splitLine: {
                lineStyle: {
                    color: 'rgba(0, 240, 255, 0.3)'
                }
            },

        },
        grid: {
            top: '3%',
            right: '3%',
            bottom: '3%',
            left: '0%',
            //  图表位置紧贴画布边缘是否显示刻度以及label文字 防止坐标轴标签溢出跟grid 区域有关系
            containLabel: true,
            // 是否显示直角坐标系网格
            show: true,
            //grid 四条边框的颜色
            borderColor: 'rgba(0, 240, 255, 0.3)'
        },
        tooltip: {
            trigger: 'item',
            // axisPointer: {            // 坐标轴指示器，坐标轴触发有效  这个模块我们此时不需要删掉即可
            // type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            // }
            //    formatter: "直接访问<br/>{b} : {c}"
        },
        color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
                offset: 0, color: '#00fffb' // 0% 处的颜色
            }, {
                offset: 1, color: '#0061ce' // 100% 处的颜色
            }],
            globalCoord: false // 缺省为 false
        },
        series: {
            name: "直接访问",
            type: 'bar',
            barWidth: 20,
            data: [2100, 1900, 1700, 1560, 1400, item, item, item, 900, 750, 600, 480, 240],
        }
    }
    myChart.setOption(option)

    window.addEventListener("resize", function () {
        myChart.resize()
    })
})

$(function () {
    const data = {
        day365: { orders: '20,301,899', amount: '99834' },
        day90: { orders: '301,987', amount: '9834' },
        day30: { orders: '1,987', amount: '3834' },
        day1: { orders: '987', amount: '834' }
    }

    $('.order .filter a').on('click', function () {
        $(this).addClass('active').siblings().removeClass('active')
        $('.order .data h4').eq(0).text(data[$(this).data('key')].orders)
        $('.order .data h4').eq(1).text(data[$(this).data('key')].amount)
    })

    $('.order .filter a').eq(0).click()
})

$(function () {
    const myChart = echarts.init(document.querySelector('.line'))
    const data = {
        year: [
            [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
            [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79]
        ],
        quarter: [
            [23, 75, 12, 97, 21, 67, 98, 21, 43, 64, 76, 38],
            [43, 31, 65, 23, 78, 21, 82, 64, 43, 60, 19, 34]
        ],
        month: [
            [34, 87, 32, 76, 98, 12, 32, 87, 39, 36, 29, 36],
            [56, 43, 98, 21, 56, 87, 43, 12, 43, 54, 12, 98]
        ],
        week: [
            [43, 73, 62, 54, 91, 54, 84, 43, 86, 43, 54, 53],
            [32, 54, 34, 87, 32, 45, 62, 68, 93, 54, 54, 24]
        ]
    }
    let index = 0
    const option = {
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            textStyle: {
                color: '#4c9bfd' // 图例文字颜色
            },
            right: '10%' // 距离右边10%
        },
        grid: {
            top: '20%',
            left: '3%',
            right: '4%',
            bottom: '3%',
            show: true,// 显示边框
            borderColor: '#012f4a',// 边框颜色
            containLabel: true // 包含刻度文字在内
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            axisTick: {
                show: false // 去除刻度线
            },
            axisLabel: {
                color: '#4c9bfd' // 文本颜色
            },
            axisLine: {
                show: false // 去除轴线
            },

        },
        yAxis: {
            axisTick: {
                show: false  // 去除刻度
            },
            axisLabel: {
                color: '#4c9bfd' // 文字颜色
            },
            splitLine: {
                lineStyle: {
                    color: '#012f4a' // 分割线颜色
                }
            }
        },
        color: ['#00f2f1', '#ed3f35'],
        series: [
            {
                name: '预期销售额',
                type: 'line',
                stack: '总量',
                data: data.year[0],
                smooth: true
            },
            {
                name: '实际销售额',
                type: 'line',
                stack: '总量',
                data: data.year[1],
                smooth: true,
            }
        ]
    }
    myChart.setOption(option)

    $('.sales .caption a').on('click', function () {
        index = $(this).index() - 1
        $(this).addClass('active').siblings().removeClass('active')
        data[$(this).data('key')]
        option.series[0].data = data[$(this).data('key')][0]
        option.series[1].data = data[$(this).data('key')][1]
        myChart.setOption(option)
    })

    let timer = setInterval(function () {
        index++
        if (index > 3) {
            index = 0
        }
        $('.sales .caption a').eq(index).click()
    }, 3000)

    $('.sales').on('mouseenter', function () {
        clearInterval(timer)
    })

    $('.sales').on('mouseleave', function () {
        timer = setInterval(function () {
            index++
            if (index > 3) {
                index = 0
            }
            $('.sales .caption a').eq(index).click()
        }, 3000)
    })

    window.addEventListener("resize", function() {
        // 让我们的图表调用 resize这个方法
        myChart.resize()
    })
})

$(function () {
    
})